{% extends 'common/base.html' %}
{% block css %}
    <style>
        .toast-success {
            background-color: #1ab394;
        }

        .err {
            pointer-events: none;
            color: black;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="wrapper">
        <header class="main-header">
            <a href="{{ url_for('main.index') }}" class="logo">
            <span class="logo-lg">
                <img src="{{ url_for('static',filename='img/logo.png') }}" style="height:35px;width:35px;">集题宝考试系统
            </span>
                <img src="{{ url_for('static',filename='img/logo.png') }}" style="height:30px;width:30px;">
            </a>

            <nav class="navbar navbar-static-top">
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only"></span>
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                                <i class="fa fa-envelope"></i> <span class="label label-warning"
                                                                     id="message_num"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-messages dropdown-menu-right" id="message"
                                style="width: 310px;">
                            </ul>
                        </li>
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="{{ url_for('static',filename='uploads/users/') }}{{ session['face'] }}"
                                     class="user-image" alt="User Image">
                                <span class="hidden-xs">{{ session['user'] }}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="user-header">
                                    <img src="{{ url_for('static',filename='uploads/users/') }}{{ session['face'] }}"
                                         class="img-circle" alt="User Image">
                                    <p>
                                        {{ session['user'] }}
                                        <small>{{ online_time }}</small>
                                    </p>
                                </li>
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="{{ url_for('main.pwd') }}" target="right"
                                           class="btn btn-default btn-flat">修改密码</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="{{ url_for('main.logout') }}" class="btn btn-default btn-flat">退出系统</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <aside class="main-sidebar">
            <section class="sidebar">
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="{{ url_for('static',filename='uploads/users/') }}{{ session['face'] }}"
                             class="img-circle"
                             alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="block m-t-xs font-bold">{{ session['user'] }}</span><br/>
                            <span class="text-muted text-xs block">{{ session['user_role'] }} </span>
                        </a>
                    </div>

                </div>
                <ul class="sidebar-menu">
                    {% for menu in menus %}
                        <li class="treeview" id="g-{{ menu.id }}" class="">
                            <a href="#">
                                <i class="{{ menu.icon }}" aria-hidden="true"></i>
                                <span>{{ menu.menustr }}</span>
                                <span class="label label-primary pull-right "></span>
                            </a>
                            <ul class="treeview-menu">
                                {% for menu_c in menu.children %}
                                    <li id="g-{{ menu.id }}-{{ menu_c.id }}">
                                        <a target="right" href="{{ menu_c.path }}">
                                            <i class="{{ menu_c.icon }}"></i>{{ menu_c.menustr }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                </ul>
            </section>
        </aside>
        <div class="content-wrapper">
            <!--内容-->
            <iframe src="{{ url_for('main.home') }}" id="iframe_right" name="right" allowtransparency="true"
                    scrolling="auto" width="100%" height="660px"></iframe>
            <!--内容-->
        </div>
        <footer class="main-footer">
            <div class="float-right">
                <strong>Questions Bank</strong>
            </div>
            <div>
                <strong>版权Copyright &copy; 2019 - 2020 归<a href="http://www.jitibao.cn">Agoni</a>所有</strong>
            </div>
        </footer>
        <div class="control-sidebar-bg"></div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            if (window != top) {
                top.location.href = location.href;
            }
            setTimeout(function () {
                toastr.options = {
                    progressBar: true,
                    closeButton: true,
                    showMethod: 'slideDown',
                    timeOut: 1000
                };
                toastr.success('{{session["user"]}}', '欢迎登录集题宝');

            }, 130);
            getMessage();

        })

        function getMessage() {
            $.post("{{ url_for('main.getMessage')}}", {"is_read": 0}, function (res) {
                var str = "";
                if (res.length > 0) {
                    str += "<div style='max-height:300px;'>";
                    for (var i = 0; i < res.length; i++) {
                        str += "<li style='padding:5px 20px'>" +
                            "<div class=\"dropdown-messages-box\">" +
                            "   <a class=\"dropdown-item float-left\" href=\"#\">" +
                            "       <img alt=\"image\" class=\"round-image\" src=\"{{ url_for('static',filename='uploads/users/') }}" + res[i][3] + "\"/>" +
                            "   </a>" +
                            "   <div class=\"media-body\" >" +
                            "       <a id='test' style=\"color:black\"  href='/getMessageDetail/" + res[i][0] + "'\" target=\"right\">" +
                            "           <strong>" + res[i][2] + "</strong>" +
                            "           <object>" + res[i][1] + "</object> <br>" +
                            "           <small class=\"text-muted\">" + res[i][4] + "</small>" +
                            "       </a>" +
                            "    </div>" +
                            "</div>" +
                            "</li>" +
                            "<li class=\"dropdown-divider\"></li>";
                    }
                    str += "</div><li>" +
                        "    <div class=\"text-center link-block\">" +
                        "        <a target='right' href=\"{{ url_for('main.message') }}\" class=\"dropdown-item\">" +
                        "            <i class=\"fa fa-envelope\"></i> <strong>阅读所有消息</strong>" +
                        "        </a>" +
                        "    </div>" +
                        "</li>";
                } else {
                    str += "<li>" +
                        "    <div class=\"text-center link-block\">" +
                        "        <a href='#' class=\"dropdown-item\">" +
                        "            <i class=\"fa fa-envelope\"></i> <strong>无未读消息</strong>" +
                        "        </a>" +
                        "    </div>" +
                        "</li>";
                }
                $("#message_num").html(res.length);
                $("#message").html(str);
            })
        }
    </script>
{% endblock %}